﻿<Page
    x:Class="TileExplorer.Badges"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TileExplorer"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dataModel="using:TileExplorer.DataModel"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>

        <ScrollViewer Grid.Row="1" x:Name="BadgeScroller">
            <StackPanel Orientation="Vertical">
                <ToggleSwitch x:Name="GlyphOrNumeric" OffContent="Glyph" OnContent="Numeric" Margin="5"></ToggleSwitch>
                <StackPanel Margin="5" Orientation="Horizontal">
                    <Slider x:Name="NumericSlider" Minimum="1" Maximum="99" Width="200" HorizontalAlignment="Left"/>
                    <TextBlock Text="{Binding ElementName=NumericSlider, Path=Value}" Style="{StaticResource SubheaderTextBlockStyle}" Margin="20 0 0 0"></TextBlock>
                </StackPanel>
                <ListView x:Name="Glyphs"
                         ItemsSource="{Binding Items}"
                         d:ItemsSource="{Binding Badges, Source={d:DesignInstance Type=dataModel:DataSource, IsDesignTimeCreatable=True}}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid HorizontalAlignment="Left" Width="250" Height="125">
                                <Image Source="{Binding Converter={StaticResource TileConverter}}" 
                                       HorizontalAlignment="Right" 
                                       VerticalAlignment="Top" 
                                       Margin="0 20 20 0"
                                       Stretch="None"></Image>
                                <StackPanel VerticalAlignment="Top" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                                    <TextBlock Text="{Binding Id}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
                                    <TextBlock Text="{Binding Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="Wrap" Margin="15,0,15,10"/>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid FlowDirection="LeftToRight" MaximumRowsOrColumns="11" Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                </ListView>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="SetBadge" Click="SetBadge_OnClick" Content="Set Badge"/>
                    <Button x:Name="ClearBadge" Click="ClearBadge_OnClick" Content="Clear Badge"/>
                </StackPanel>
            </StackPanel>
        </ScrollViewer>

    </Grid>
</Page>
